
<template>
  <view class="page">
    <!-- 顶部筛选 -->
    <view class="tabs">
      <view 
        v-for="tab in tabs" 
        :key="tab.id"
        class="tab-item"
        :class="{ active: currentTab === tab.id }"
        @click="currentTab = tab.id"
      >
        {{ tab.name }}
      </view>
    </view>

    <!-- 练习列表 -->
    <scroll-view class="list" scroll-y>
      <view 
        v-for="item in exercises" 
        :key="item.id" 
        class="exercise-card"
        @click="goToDetail(item.id)"
      >
        <!-- 卡片头部 -->
        <view class="card-top">
          <text class="title">{{ item.title }}</text>
          <text class="tag">{{ item.subject }}</text>
        </view>
        
        <!-- 卡片内容 -->
        <view class="card-info">
          <view class="info-row">
            <text class="label">题目数量：</text>
            <text class="value">{{ item.questionCount }}题</text>
          </view>
          <view class="info-row">
            <text class="label">难度等级：</text>
            <text class="value">{{ item.difficulty }}</text>
          </view>
          <view class="info-row">
            <text class="label">做题时长：</text>
            <text class="value">{{ item.duration }}分钟</text>
          </view>
        </view>

        <!-- 底部按钮 -->
        <button class="start-btn" @click.stop="goToDetail(item.id)">
          开始做题
        </button>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 顶部标签页数据
const tabs = [
  { id: 1, name: '推荐' },
  { id: 2, name: '数学' },
  { id: 3, name: '英语' },
  { id: 4, name: '专业课' }
]

// 当前选中的标签
const currentTab = ref(1)

// 练习列表数据
const exercises = ref([
  {
    id: 1,
    title: '2024考研数学一期末押题',
    subject: '数学一',
    questionCount: 25,
    difficulty: '中等',
    duration: 120
  },
  {
    id: 2,
    title: '高数期末重点练习',
    subject: '数学一',
    questionCount: 20,
    difficulty: '较难',
    duration: 90
  },
  {
    id: 3,
    title: '线代基础概念练习',
    subject: '数学一',
    questionCount: 15,
    difficulty: '简单',
    duration: 60
  }
])

// 跳转到练习详情页
const goToDetail = (id) => {
  uni.navigateTo({
    url: `/pages/exercise/detail?id=${id}`
  })
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 30rpx;
}

.tabs {
  display: flex;
  background: #fff;
  padding: 20rpx;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
}

.tab-item {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 16rpx 0;
  position: relative;
}

.tab-item.active {
  color: #A8BF8F;
  font-weight: 500;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background: #A8BF8F;
  border-radius: 2rpx;
}

.list {
  height: calc(100vh - 180rpx);
}

.exercise-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.tag {
  font-size: 24rpx;
  color: #A8BF8F;
  padding: 4rpx 16rpx;
  background: rgba(168, 191, 143, 0.1);
  border-radius: 8rpx;
}

.card-info {
  margin-bottom: 30rpx;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.info-row:last-child {
  margin-bottom: 0;
}

.label {
  font-size: 26rpx;
  color: #999;
  width: 140rpx;
}

.value {
  font-size: 26rpx;
  color: #666;
}

.start-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background: #A8BF8F;
  color: #fff;
  font-size: 28rpx;
  border-radius: 40rpx;
  border: none;
}

.start-btn:active {
  opacity: 0.8;
}
</style>